<template>
  <div class="column-box">
    <h3>测试依赖包组件</h3>
    <div class="package-box">
      <dn-input-multiple v-model="inputValue"
                         :placeholder="placeholder" />
      <span>日期组件</span>
      <nr-date-picker v-model="value1"
                      type="date"
                      placeholder="选择日期" />
      <span>
        日期区间组件
      </span>
      <nr-date-range-picker v-model="value2"
                            mode="object" />
      <span>车型组件</span>
      <nr-vehicle-model-select v-model="modelValues"
                               :mode="mode"
                               :vehicle-models-options="vehicleModels" />
    </div>
  </div>
</template>

<script>

export default {
  name: 'TableColumnIndex',
  components: {},
  data () {
    return {
      value1: '',
      value2: null,
      modelValues: {},
      vehicleModels: [
        {
          image:
            'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00643-3806.jpg',
          length: [
            {
              label: '13米',
              load: 30,
              value: 13,
              volume: 75,
            },
            {
              label: '18米',
              load: 11,
              value: 22,
              volume: 55,
            },
          ],
          name: '半挂车',
          value: 1,
        },
        {
          image:
            'https://img0.baidu.com/it/u=342166596,4118482217&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
          length: [
            {
              label: '13米',
              load: 55,
              value: 66,
              volume: 88,
            },
            {
              label: '18米',
              load: 11,
              value: 22,
              volume: 55,
            },
            {
              label: '99米',
              load: 111,
              value: 222,
              volume: 333,
            },
          ],
          name: '高栏车',
          value: 2,
        },
      ],
      inputValue: ['合同编号aaa', '合同编号bbb'],
      placeholder: '请输入合同编号',
    }
  }
}
</script>

<style scoped>
.column-box {
  height: 100vh;
  padding: 20px;
  background: #fff;
  overflow-y: auto;
}
</style>